<template>
  <div class="full-gift">
    <el-form-item label="参与次数" required>
      <el-form-item>
        <el-radio-group v-model="limitNumType" @change="changeLimitNumType">
          <el-radio label="all">不限制</el-radio>
          <el-radio label="part">
            每人最多可参与
            <el-input
              v-if="limitNumType == 'part'"
              class="sa-w-120 sa-m-l-12"
              v-model="activityDetail.model.rules.limit_num"
            >
              <template #append>次数</template>
            </el-input>
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form-item>
    <el-form-item label="赠送时机" prop="rules.event" required>
      <el-radio-group v-model="activityDetail.model.rules.event">
        <el-radio label="paid">支付完成</el-radio>
        <el-radio label="confirm">
          <div class="sa-flex">
            确认收货
            <el-popover :width="230" trigger="hover">
              <div>必须全部确认收货才能满足条件</div>
              <template #reference>
                <el-icon class="warning sa-m-l-8">
                  <Warning />
                </el-icon>
              </template>
            </el-popover>
          </div>
        </el-radio>
        <el-radio label="finish">交易完成</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="优惠类型" prop="rules.type" required>
      <el-radio-group v-model="activityDetail.model.rules.type">
        <el-radio label="money">满足金额</el-radio>
        <el-radio label="num">满足件数</el-radio>
      </el-radio-group>
    </el-form-item>
    <div
      class="label-inner"
      v-for="(ditem, dindex) in activityDetail.model.rules.discounts"
      :key="ditem"
    >
      <el-form-item>
        <div class="rules-title">{{ `规则${dindex + 1}` }}</div>
      </el-form-item>
      <el-form-item>
        <el-form-item
          label="消费满"
          label-width="fit-content"
          :prop="'rules.discounts.' + dindex + '.full'"
          :rules="activityDetail.rules.discounts.full"
        >
          <el-input class="sa-w-120" v-model="ditem.full" type="number">
            <template #append>
              {{ activityDetail.model.rules.type == 'money' ? '元' : '件' }}
            </template>
          </el-input>
          <div class="tip sa-m-l-8" v-if="dindex == 0"> 满赠金额优惠按照商品实际金额计算 </div>
          <el-button
            v-if="dindex"
            class="is-link sa-m-l-12"
            type="danger"
            @click="deleteDiscounts(dindex)"
            >删除</el-button
          >
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-form-item
          label="赠送单数"
          label-width="fit-content"
          :prop="'rules.discounts.' + dindex + '.gift_num'"
          :rules="activityDetail.rules.discounts.gift_num"
        >
          <el-input class="sa-w-120" v-positiveinteger v-model="ditem.gift_num" type="number">
            <template #append>单</template>
          </el-input>
          <div class="tip sa-m-l-8" v-if="dindex == 0">
            该单数指赠品发放单数，如设置100单，那参与此活动的前100个订单可获取赠品
          </div>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-form-item
          label="赠送类型"
          label-width="fit-content"
          :prop="'rules.discounts.' + dindex + '.types'"
          :rules="activityDetail.rules.discounts.types"
        >
          <el-checkbox-group v-model="ditem.types">
            <el-checkbox label="coupon">优惠券</el-checkbox>
            <el-checkbox label="score">积分</el-checkbox>
            <el-checkbox label="money">余额</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form-item>
      <div class="sa-p-l-24">
        <!-- 优惠券 -->
        <el-form-item v-if="ditem.types.includes('coupon')">
          <el-form-item label="优惠券" label-width="fit-content">
            <div>
              <el-button class="is-link" type="primary" @click="selectCoupon(dindex)"
                >添加优惠券</el-button
              >
              <div class="sa-template-wrap" v-if="ditem.coupon_list.length > 0">
                <div class="title sa-flex">
                  <div class="key">名称</div>
                  <div class="value">优惠内容</div>
                  <div class="oper">操作</div>
                </div>
                <div>
                  <div class="item" v-for="(element, index) in ditem.coupon_list" :key="element">
                    <el-form-item class="key">
                      <div class="sa-table-line-1">{{ element.name }}</div>
                    </el-form-item>
                    <el-form-item class="value">
                      <div class="sa-table-line-1">
                        {{ element.amount_text }}
                      </div>
                    </el-form-item>
                    <el-form-item class="oper">
                      <el-button class="is-link" type="danger" @click="deleteCoupon(dindex, index)">
                        移除
                      </el-button>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form-item>
        <!-- 积分 -->
        <el-form-item v-if="ditem.types.includes('score')">
          <el-form-item label="积分" label-width="fit-content">
            <el-input class="sa-w-120" v-positiveinteger v-model="ditem.score" type="number">
              <template #append>积分</template>
            </el-input>
          </el-form-item>
        </el-form-item>
        <!-- 余额 -->
        <el-form-item v-if="ditem.types.includes('money')">
          <el-form-item label="余额" label-width="fit-content">
            <el-input class="sa-w-120" v-model="ditem.money" type="number">
              <template #append>元</template>
            </el-input>
          </el-form-item>
        </el-form-item>
      </div>
    </div>
    <el-form-item>
      <el-button class="is-link" type="primary" @click="addDiscounts">+ 添加优惠</el-button>
    </el-form-item>
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue';
  import { useModal } from '@/sheep/hooks';
  import CouponSelect from '../../../coupon/select.vue';
  const props = defineProps(['activityDetail']);

  const limitNumType = ref('all');
  watch(
    () => props.activityDetail,
    () => {
      limitNumType.value = props.activityDetail.model.rules.limit_num > 0 ? 'part' : 'all';
    },
    {
      deep: true,
    },
  );
  function changeLimitNumType() {
    if (limitNumType.value == 'all') {
      props.activityDetail.model.rules.limit_num = 0;
    } else if (limitNumType.value == 'part') {
      props.activityDetail.model.rules.limit_num = '';
    }
  }

  function addDiscounts() {
    props.activityDetail.model.rules.discounts.push({
      full: '',
      gift_num: '',
      types: [],
      coupon_ids: '',
      total: '',
      coupon_list: [],
      score: '',
      money: '',
      // goods_ids:"",
    });
  }
  function deleteDiscounts(index) {
    props.activityDetail.model.rules.discounts.splice(index, 1);
  }

  function selectCoupon(index) {
    useModal(
      CouponSelect,
      {
        title: '选择优惠券',
        status: 'hidden',
        multiple: true,
      },
      {
        confirm: (res) => {
          props.activityDetail.model.rules.discounts[index].coupon_list.push(...res.data);
        },
      },
    );
  }
  function deleteCoupon(index, dindex) {
    props.activityDetail.model.rules.discounts[index].coupon_list.splice(dindex, 1);
  }
</script>

<style lang="scss" scoped>
  .rules-title {
    width: 100%;
    max-width: 360px;
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    border-radius: 4px;
    background: var(--sa-table-header-bg);
    font-size: 12px;
    color: var(--sa-subtitle);
  }
</style>
